<template>
  <div>
    <el-row v-for="(item, index) in list" :key="index" class="margin-bottom-10 wft-custom-row">
      <el-col :span="24" class="margin-bot-8 params-bottom-line">
        <el-row>
          <el-col :span="22" class="margin-bot-4">
            <h5>{{ addButtonText.replace('添加', '') + (index + 1) }}</h5>
          </el-col>
          <el-col :span="2" class="margin-bot-4">
            <el-button icon="Delete" link @click="list.splice(index, 1)" class="font-size-14" />
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="24" class="margin-bot-4">
        <el-tooltip effect="dark" content="上个页面传递过来的参数key" placement="top">
          <el-input v-model="item.name" placeholder="key" />
        </el-tooltip>
      </el-col>
      <el-col :span="24" class="margin-bot-4">
        <el-tooltip effect="dark" content="要赋值的页面数据" placement="top">
          <PageDataModel :panel-json="panelJson" v-model="item.value" />
        </el-tooltip>
      </el-col>
    </el-row>
    <el-button class="wft-w-100 margin-bottom-10" @click="list.push({name: '', value: ''})">
      {{ addButtonText }}
      <el-tooltip effect="dark" content="将上个页面传递的参数保存至页面变量中" placement="top">
        <i class="el-icon-info margin-left-4" />
      </el-tooltip>
    </el-button>
  </div>
</template>
<script setup lang='ts'>
import PageDataModel from '../PageDataModel/index.vue'

withDefaults(defineProps<{
  list: Array<Omit<TParamItem, 'type'>>,
  panelJson: TPanel,
  addButtonText?: string
}>(), {
  eventParams: '',
  addButtonText: '添加取参'
})

</script>